*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    width: 100%;
    height: 100vh;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container{
    width: 40rem;
    height: 40rem;
    /* border: 1px solid red; */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .sun{
    position: absolute;
    width: 10rem;
    height: 10rem;
    background-color: #ff0;
    border-radius: 50%;
    box-shadow: 0 0 4rem #fff,0 0 5rem #fff;
}

/* 定义变量 */
.earth{--diameter:30;--duration:36.5;}
.moon{--diameter:8;--duration:2.7;top:0.3rem;right: 0.3rem;}

/* the earth style */
.earth,
.moon{
    position: absolute;
    width: calc(var(--diameter)*1rem);
    height: calc(var(--diameter)*1rem);
    /* background-color: aqua; */
    border-radius: 50%;
    border-style: solid solid none none;
    border-color: silver transparent transparent transparent;
    border-width: 0.1rem;
    animation: move calc(var(--duration)*1s) linear infinite;
}

@keyframes move{
    to{
        transform: rotate(1turn);
    }
}

/* 定义变量 */
.earth::before{
    --diameter:3;
    --color:dodgerblue;
    --top:2.8;
    --right:2.8;
}
.moon::before{
    --diameter:1.2;
    --color:#fff;
    --top:0.8;
    --right:0.2;
}

/* 画地球和月亮 */
.earth::before,
.moon::before{
    content: "";
    position: absolute;
    top: calc(var(--top)*1rem);
    right: calc(var(--right)*1rem); 
    width: calc(var(--diameter)*1rem);
    height: calc(var(--diameter)*1rem);
    background-color: var(--color);
    border-radius: 50%;
}

/* 
利用计算属性和以达到代码复用的目的
*/